<template>
	<view>
		<view class="clueQuantity_change_title">战败量</view>
		<view class="clueQuantity_change" :style="{height: height+'rpx'}">
			<view class="qiun-columns" style="overflow: hidden;">
				<view><echarts :option="optionGroupFun()" :numLeng='numLeng' :style="{height: height+'rpx'}"></echarts></view>
			</view>
		</view>
	</view>
</template>

<script>
import echarts from '@/components/echarts/echarts.vue';
export default {
	data() {
		return {
			//柱状图数据
			optionStack: {}, //柱状图配置
		};
	},
	props: {
		echartsData: {
			type: Object
		},
		height:{
			type:String,
			default:'420'
		},
		numLeng:{
			type:Number
		}
	},
	watch: {
		echartsData(Val) {
			return Val;
		}
	},
	components: {
		echarts
	},
	created() {
		
	},
	methods: {
		//柱状图配置方法
		optionGroupFun() {
			console.log(this.echartsData,'-----------柱状图数据')
			return {
			
				tooltip: {
					trigger: 'axis',
					backgroundColor: '#222222',	
					extraCssText: 'box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);z-index:99',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					formatter: function(data) {
						var res = '';
					//	console.log(data);
						data.forEach((item, index) => {
							res += `<span style='color: #FFFFFF'>战败量：${item.value}</span> <br/>`;
						});
						return res;
					},

					formatterStatus:true,
					formatFunDefeat:'formatFunDefeat',
				},
				xAxis: [
					{
						type: 'category',
						data: this.echartsData.categories,
						axisLabel: {
							margin: 10,
							color: '#a4a4a4'
						},
						axisLine: {
							show: false
						}
					}
				],

				yAxis: [
					{
						axisLabel: {
							color: '#a4a4a4'
						},
						axisLine: {show:false},
						splitLine: {
						  lineStyle: {
						    type: "dashed",
						  },
						  show: true,
						},
					}
				],
				series: [
					{
						type: 'bar',
						data: this.echartsData.series,
						barWidth: '20px',
						itemStyle: {
							 color: '#FD8686'
						},
						label: {
							normal: {
								show: true,
								position: 'top'
							}
						}
					}
				]
			};
		
		}
	}
};
</script>
<style scoped lang="scss">
.clueQuantity_change_title {
	font-size: 32rpx;
	color: #43425d;
	padding-left: 30rpx;
	background-color: #f5f6fa;
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	font-weight: 500;
}
.clueQuantity_change {
	width: 100%;
	height: 440rpx;
	background-color: #ffffff;
}
</style>
